<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" v-model="listQuery.hotel_name" placeholder="酒店名称" style="width: 220px;" clearable/>

      <el-input class="filter-item" v-model="listQuery.basic_room_type_name" placeholder="子物理房型名称" style="width: 220px;" clearable/>

      <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="酒店ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.hotel_id }}
        </template>
      </el-table-column>

      <el-table-column label="  酒店名称" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.hotel.inn_name }}
        </template>
      </el-table-column>

      <el-table-column label="子物理房型ID" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column label="子物理房型名称" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.basic_room_type_name }}
        </template>
      </el-table-column>

      <el-table-column label="窗户" min-width="110" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.has_window === 0">无窗</span>
          <span v-else-if="scope.row.has_window === 1">部分有窗</span>
          <span v-else-if="scope.row.has_window === 2">有窗</span>
          <span v-else-if="scope.row.has_window === 4">内窗</span>
          <span v-else-if="scope.row.has_window === 12">部分内窗</span>
          <span v-else-if="scope.row.has_window === 100">未知</span>
        </template>
      </el-table-column>

      <el-table-column label="房型类型" min-width="110" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.room_type_std === 1">标准间</span>
          <span v-else-if="scope.row.room_type_std === 2">双床房</span>
          <span v-else-if="scope.row.room_type_std === 3">三人房</span>
          <span v-else-if="scope.row.room_type_std === 4">单人间</span>
          <span v-else-if="scope.row.room_type_std === 5">家庭房</span>
          <span v-else-if="scope.row.room_type_std === 6">大床房</span>
          <span v-else-if="scope.row.room_type_std === 7">四人间</span>
          <span v-else-if="scope.row.room_type_std === 8">套房</span>
          <span v-else-if="scope.row.room_type_std === 9">床位房</span>
          <span v-else-if="scope.row.room_type_std === 10">公寓</span>
          <span v-else-if="scope.row.room_type_std === 11">别墅</span>
          <span v-else-if="scope.row.room_type_std === 12">房车</span>
          <span v-else-if="scope.row.room_type_std === 13">帐篷</span>
          <span v-else-if="scope.row.room_type_std === 14">小木屋</span>
          <span v-else-if="scope.row.room_type_std === 15">工作室</span>
          <span v-else-if="scope.row.room_type_std === 16">高级房</span>
          <span v-else-if="scope.row.room_type_std === 17">豪华房</span>
          <span v-else-if="scope.row.room_type_std === 19">行政房</span>
        </template>
      </el-table-column>

      <el-table-column label="锦江最大房间数量" min-width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.max_room }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" min-width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="250" align="center" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="handleSalesRoomType(scope.row)">售卖房型</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[5,10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
  import request from "@/utils/request";

  export default {
    data() {
      return {
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
          hotel_name: "",
          basic_room_type_name: "",
        },
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        request({
          url: "/api/backend/room/subBasicRoomTypeList",
          method: "get",
          params: this.listQuery,
        }).then(response => {
          this.list = response.data.items;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      // 售卖房型
      handleSalesRoomType(row) {
        this.$router.push(`/salesRoomTypeList?basic_room_type_id=${row.id}`);
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
